<template>
  <div class="role">
    <div class="search-box">
      <!-- 输入框 -->
      <div class="row" v-show="rowShow">
        <div class="spinp">
          <span>角色名称</span>
          <el-input
            placeholder="请输入角色名称"
            v-model="form.roleName"
            clearable
          />
        </div>
        <div class="spinp">
          <span>权限字符</span>
          <el-input
            placeholder="请输入权限字符"
            v-model="form.roleKey"
            clearable
          />
        </div>
        <div class="spinp">
          <span>状态</span>
          <el-select v-model="form.opvalue" placeholder="角色状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </div>
        <div class="spinp">
          <span>创建时间</span>
          <el-date-picker
            size="large"
            v-model="time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            yyyy
            MM
            dd
          >
          </el-date-picker>
        </div>
        <div class="top-but">
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="Reset">重置</el-button>
        </div>
      </div>
      <!-- 操作按钮 -->
      <div class="but">
        <div class="but-left">
          <el-button
            type="primary"
            icon="el-icon-plus"
            plain
            @click="addshow = true"
            >新增</el-button
          >
          <el-button
            type="success"
            icon="el-icon-edit"
            plain
            :disabled="multipleSelection.length == 1"
            @click="edit(multipleSelection[0])"
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            plain
            :disabled="multipleSelection.length == 0"
            @click="delfn(multipleSelection)"
            >删除</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-download"
            plain
            @click="exportrole"
            >导出</el-button
          >
        </div>
        <div class="but-right">
          <el-tooltip
            class="item"
            :content="rowShow ? '隐藏搜索' : '显示搜索'"
            placement="top"
          >
            <el-button
              icon="el-icon-search"
              circle
              @click="rowShow = !rowShow"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button
              icon="el-icon-refresh"
              circle
              @click="rolelist"
            ></el-button>
          </el-tooltip>
        </div>
      </div>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        table-layout="auto"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="roleId" label="角色编号"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleKey" label="权限字符"> </el-table-column>
        <el-table-column prop="roleSort" label="显示顺序"> </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              active-value="0"
              inactive-value="1"
              @change="switchShowStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" icon="el-icon-edit" @click="edit(row.roleId)"
              >修改</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="delfn([row.roleId])"
              >删除</el-button
            >
            <el-button type="text" icon="el-icon-d-arrow-right">更多</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 添加编辑页 -->
      <addRole :isshow="addshow" :isid="isroleId" @retu="choice" :key="count" />
    </div>
  </div>
</template>

<script>
import {
  roleDataApi,
  StateOptionApi,
  roleStateApi,
  delRoleApi,
  exportRoleApi,
} from "@/API/indexwei";
import moment from "moment";
import addRole from "@/views/System/addRole.vue";
export default {
  name: "Order",
  components: {
    addRole,
  },
  data() {
    return {
      // 状态的选择数据
      options: [],
      // 表格数据
      tableData: [],
      // 选择框数据
      multipleSelection: [],
      // 当前条数
      total: 0,
      // 当前页数
      pageNum: 1,
      // 当前页条数
      pageSize: 10,
      //   输入框数据
      form: {
        roleName: "",
        roleKey: "",
        // 状态选择内容
        opvalue: "",
        // "params[beginTime]": "",
        // "params[endTime]": "",
      },
      // 日期的集合数据
      time: "",
      // beginTime: "",
      // endTime: "",
      // 添加框显示隐藏
      addshow: false,
      // 点击编辑获取id
      isroleId: 0,
      // 组件属性使用
      count: 0,
      // 搜索框显示隐藏
      rowShow: true,
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.roleId);
      console.log(this.multipleSelection);
    },
    // 请求角色列表
    rolelist() {
      roleDataApi({
        pageNum: this.pageNum + "",
        pageSize: this.pageSize + "",
        ...this.form,
        // ...this.time,
        // "params[beginTime]": this.beginTime,
        // "params[endTime]": this.endTime,
        // beginTime: this.beginTime,
        // endTime: this.endTime,
      }).then((res) => {
        console.log(res);
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    // 请求状态选项
    StateOption() {
      StateOptionApi().then((res) => {
        console.log(res);
        this.options = res.data;
      });
    },

    // 分页器的操作
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.rolelist();
    },

    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.rolelist();
    },
    // // 点击切换角色状态
    switchShowStatus(row) {
      console.log(row);

      this.$confirm("确定修改该角色状态吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          roleStateApi({
            roleId: row.roleId,
            status: row.status,
          }).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                showClose: true,
                message: "状态修改成功",
                type: "success",
              });
              this.rolelist();
            } else {
              this.$message({
                showClose: true,
                message: "状态修改失败",
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          if (row.status == 1) {
            row.status = "0";
          } else {
            row.status = "1";
          }
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    // 点击搜索
    search() {
      // 修改时间格式
      if (this.time.length != 0) {
        this.time = this.time.map((item) => moment(item).format("YYYY-MM-DD"));

        // this.form["params[beginTime]"] = this.time[0];
        // this.form["params[endTime]"] = this.time[1];
      }
      //   console.log(this.beginTime, this.endTime);
      this.rolelist();
    },
    // 点击重置
    Reset() {
      this.form.roleName = "";
      this.form.roleKey = "";
      this.form.opvalue = "";
      this.time = "";
      this.beginTime = "";
      this.endTime = "";
      this.rolelist();
    },

    // add页点击确定或者取消
    choice(val) {
      if (val) {
        this.rolelist();
      }
      this.roleId = 0;
      this.addshow = false;
      this.count++;
      // console.log(this.count);
    },
    // 点击修改
    edit(id) {
      this.isroleId = id;
      this.addshow = true;
    },
    // 点击删除
    delfn(ids) {
      this.$confirm(
        `是否确认删除角色编号为"${ids.join(",")}"的数据项？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          delRoleApi(ids).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.rolelist();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
              this.rolelist();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击导出
    exportrole() {
      exportRoleApi({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          console.log(res);
          const link = document.createElement("a");
          let blob = new Blob([res], { type: "application/vnd.ms-excel" });
          const fileName = "角色管理.xls";
          link.href = URL.createObjectURL(blob);
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          URL.revokeObjectURL(link.href); // 释放URL 对象
          document.body.removeChild(link);
        })
        .catch((error) => {
          this.$message({
            message: "导出失败",
            type: "success",
            duration: 3000,
          });
        });
    },
  },
  created() {
    console.log(123);
    // 请求角色列表
    this.rolelist();
    this.StateOption();
  },
};
</script>

<style lang="less" scoped>
.search-box {
  width: 1000;
  // box-shadow: 0 0 4px #ccc;
  border-radius: 10px;
  // padding: 20px;
  margin: 20px 0;

  .row {
    // padding: 20px 0;
    display: flex;
    flex-wrap: wrap;

    .spinp {
      width: 400px;
      padding: 0 10px 18px 0;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        padding-right: 10px;
        font-size: 18px;
        width: 100px;
        font-weight: 700;
      }

      /deep/ .el-input__inner {
        width: 304px;
        height: 40px;
      }

      .el-range-editor {
        width: 395px;
        height: 40px;
        // padding: 0 30px 0 15px;
      }
    }

    .top-but {
      .el-button {
        margin: 0 10px 18px 0px;
      }
    }
  }
}

.box {
  width: 400px;

  .top {
    text-align: center;
  }

  .left {
    float: left;
    width: 60px;
  }

  .right {
    float: right;
    width: 60px;
  }

  .bottom {
    clear: both;
    text-align: center;
  }

  .item {
    margin: 4px;
  }

  .left .el-tooltip__popper,
  .right .el-tooltip__popper {
    padding: 8px 10px;
  }
}
.but {
  display: flex;
  justify-content: space-between;
  // .but-left {
  // }
  // .but-right {
  // }
}
</style>